<template>
    <el-card shadow="never" class="border-0">
        <!-- 新增|刷新 -->
        <div class="flex items-center justify-between mb-4">
            <div>
                <el-button type="primary" size="small" @click="handleCreate"
                    >新增</el-button
                >
            </div>

            <el-tooltip effect="dark" content="刷新数据" placement="top">
                <el-button text @click="initTableData">
                    <el-icon :size="20">
                        <Refresh />
                    </el-icon>
                </el-button>
            </el-tooltip>
        </div>

        <!-- 表格数据 -->
        <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            v-loading="loading"
        >
            <el-table-column
                label="考试模板ID"
                align="center"
                show-overflow-tooltip
            >
                <template #default="{ row }">
                    {{ row.configId }}
                </template>
            </el-table-column>

            <el-table-column
                label="考试模板名称"
                align="center"
                show-overflow-tooltip
            >
                {{ examConfigName }}
            </el-table-column>

            <el-table-column
                label="试卷名称"
                align="center"
                show-overflow-tooltip
            >
                <template #default="{ row }">
                    {{ row.paperName }}
                </template>
            </el-table-column>

            <el-table-column label="操作" width="320" align="center">
                <template #default="scope">
                    <small
                        v-if="scope.row.super == 1"
                        class="text-sm text-gray-500"
                        >暂无操作</small
                    >
                    <div v-else>
                        <el-button
                            type="primary"
                            size="small"
                            text
                            @click="handleEdit(scope.row)"
                            >修改</el-button
                        >
                        <el-button
                            type="primary"
                            size="small"
                            text
                            @click="handleAddQuestion(scope.row)"
                            >题目</el-button
                        >
                        <el-popconfirm
                            title="是否要删除该试卷？"
                            confirmButtonText="确认"
                            cancelButtonText="取消"
                            @confirm="handleDelete(scope.row.paperId)"
                        >
                            <template #reference>
                                <el-button
                                    text
                                    type="primary"
                                    size="small"
                                    :disabled="scope.row.state == '1'"
                                    >删除</el-button
                                >
                            </template>
                        </el-popconfirm>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <!-- 新增|修改弹窗 -->
        <FormDrawer
            ref="formDrawerRef"
            :title="drawerTitle"
            @submit="handleSubmit"
        >
            <el-form
                :model="form"
                ref="formRef"
                :rules="rules"
                label-width="120px"
                :inline="false"
            >
                <el-form-item label="试卷名称" prop="paperName">
                    <el-input
                        v-model="form.paperName"
                        placeholder="试卷名称"
                    ></el-input>
                </el-form-item>
            </el-form>
        </FormDrawer>
    </el-card>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import FormDrawer from "~/components/FormDrawer.vue";
import { toast, toastWarn } from "~/composables/util";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import {
    api_examConfig_list,
    api_examPaper_by_configId,
    api_examPaper_add,
    api_examPaper_update,
    api_examPaper_delete,
} from "~/api/exam/examPaper";

//store存储
const store = useStore();

// 全局路由
const router = useRouter();

// 考试模版信息
const examConfigName = ref(null);

// 表格分页数据
const tableData = ref([]);
const loading = ref(false);
const currentPage = ref(1);

// 查询条件
const searchForm = reactive({
    configId: null,
});

// 生命周期函数
onMounted(() => {
    if (null == store.state.configId) {
        toastWarn("试卷ID不能为空");
        return;
    }
    //赋值
    searchForm.configId = store.state.configId;
    // console.log(searchForm.configId)

    //获取考试模版信息
    initExamConfigData(searchForm.configId);

    //初始化列表数据
    initTableData();
});

// 表单部分
// 是否是编辑弹窗
const editId = ref(0);
const drawerTitle = computed(() => (editId.value ? "修改" : "新增"));
const formDrawerRef = ref(null);
const formRef = ref(null);
const form = reactive({
    paperName: null,
});

//执行表单校验
const rules = {
    paperName: [
        { required: true, message: "试卷名称不能为空", trigger: "change" },
    ],
};

//提交表单
const handleSubmit = () => {
    //表单校验
    formRef.value.validate((valid) => {
        if (!valid) return;

        formDrawerRef.value.showLoading();
        const fun = editId.value
            ? api_examPaper_update(editId.value, form)
            : api_examPaper_add(searchForm.configId, form);
        fun.then((res) => {
            toast(drawerTitle.value + "成功");
            initTableData(editId.value ? false : 1);
            formDrawerRef.value.close();
        }).finally(() => {
            formDrawerRef.value.hideLoading();
        });
    });
};

// 新增按钮点击事件
const handleCreate = () => {
    //修改标记置为0
    editId.value = 0;
    resetForm({
        paperName: null,
    });
    //打开弹窗
    formDrawerRef.value.open();
};

// 重置表单
function resetForm(row = false) {
    if (formRef.value) formRef.value.resetFields();
    if (row) {
        for (const key in form) {
            form[key] = row[key];
        }
    }
}

//获取考试模版信息
function initExamConfigData(configId) {
    const paramIo = {};
    paramIo.configId = configId;
    api_examConfig_list(paramIo).then((res) => {
        examConfigName.value = res.records[0].examName;
    });
}

// 获取数据
function initTableData(p = null) {
    //指定页码是否为空
    if (typeof p == "number") {
        currentPage.value = p;
    }

    loading.value = true;
    searchForm.page = currentPage.value;

    api_examPaper_by_configId(searchForm.configId)
        .then((res) => {
            if (res) {
                tableData.value = res;
            } else {
                tableData.value = [];
            }
        })
        .finally(() => {
            loading.value = false;
        });
}

// 编辑
const handleEdit = (row) => {
    editId.value = row.paperId;
    resetForm(row);
    formDrawerRef.value.open();
};

// 删除
const handleDelete = (id) => {
    loading.value = true;
    api_examPaper_delete(id)
        .then((res) => {
            toast("删除成功");
            initTableData();
        })
        .finally(() => {
            loading.value = false;
        });
};

// 题目
const handleAddQuestion = (row) => {
    //试卷ID
    store.commit("SetPaperId", row.paperId);
    //跳转界面
    router.push({
        path: "/examQuestion",
    });
};
</script>

<style scoped>
.hide ::v-deep .el-upload--picture-card {
    display: none;
}
</style>